<!-- 诉讼服务 -->
<template>
	<div class="litigation-service lawyer bg-w">
		<van-nav-bar :title="this.$route.meta.title" left-arrow @click-left="$router.go(-1)">
		</van-nav-bar>
		<div class="litigation-service-content">
			<!-- 提交案件 -->
			<div class="p-15" v-if="stepIndex===0">
				<template>
					<p class="common-title">所在区域</p>
					<div class="litigation-input-warp" @click="showPop=true">
						<van-field class="litigation-input" readonly placeholder="请选择" v-model="form.region_name" :border="false" />
						<img src="../assets/images/biaotou-kepaixu.png" alt="">
					</div>
					<van-popup v-model="showPop" position="bottom">
						<van-picker show-toolbar value-key="text" :columns="columns" @cancel="showPop = false" @confirm="handleArea" />
					</van-popup>
				</template>
				<template>
					<p class="common-title">联系电话</p>
					<van-field class="litigation-input" placeholder="请输入手机号" v-model="form.user_phone" :border="false" />
				</template>
				<template>
					<p class="common-title">验证码</p>
					<van-field
					  v-model="form.v_code"
					  center
					  clearable
					  class="litigation-input"
					  placeholder="请输入短信验证码"
					>
					  <template #button>
					    <van-button :disabled="sendYes" size="small" @click="sendCode" type="primary">{{btnMsg}}</van-button>
					  </template>
					</van-field>
				</template>
				<template>
					<div class="flex-between-center" @click="add1">
						<p class="common-title">起诉方</p>
						<van-icon name="add-o" />
					</div>
					<div class="litigation-input-warp" @click="showPop1=true">
						<van-field class="litigation-input" readonly placeholder="请选择身份类型" v-model="typeName" :border="false" />
						<img src="../assets/images/biaotou-kepaixu.png" alt="">
					</div>
					<van-popup v-model="showPop1" position="bottom">
						<van-picker show-toolbar :columns="objList" @cancel="showPop1 = false" @confirm="handleType" />
					</van-popup>
					<van-form>
						<template v-for="(item,index) in addObj1">
							<div class="flex-between-center" @click="del1(index)">
								<p class="common-title">起诉方({{index+1}})</p>
								<van-icon name="close" />
							</div>
							<div v-if="item.obj==1">
								<van-field :required="true" v-model="item.name" label="企业名" placeholder="请输入企业名" :rules="[{ required: true, message: '请填写企业名' }]" />
								<van-field :required="true" v-model="item.legal" label="法人代表" placeholder="请输入法人代表" :rules="[{ required: true, message: '请填写法人代表' }]" />
								
								<van-field :required="true" v-model="item.address" type="textarea" label="企业地址" placeholder="请输入企业地址" :rules="[{ required: true, message: '请填写企业地址' }]" />
								<van-field v-model="item.mail_num" label="邮政编码" placeholder="请输入邮政编码" />
							</div>
							<div v-else-if="item.obj===0">
								<van-field :required="true" v-model="item.name" label="姓名" placeholder="请输入姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
								<van-field :required="true" v-model="item.id_card" name="asyncValidator" label="身份证号" placeholder="请输入身份证号" :rules="[{ required: true, message: '请填写身份证号' },{ validator: asyncValidator, message: '请填写正确格式身份证号' }]" />
								
								<van-field name="radio" label="性别">
									<van-radio-group slot="input" v-model="item.sex" direction="horizontal">
										<van-radio name="男">男</van-radio>
										<van-radio name="女">女</van-radio>
									</van-radio-group>
								</van-field>
								<van-field v-model="item.mail_num" label="邮政编码" placeholder="请输入邮政编码" />
							</div>
						</template>
					</van-form>

				</template>
				<template>
					<div class="flex-between-center" @click="add2">
						<p class="common-title">被起诉方</p>
						<van-icon name="add-o" />
					</div>
					<div class="litigation-input-warp" @click="showPop2=true">
						<van-field class="litigation-input" readonly placeholder="请选择身份类型" v-model="objName" :border="false" />
						<img src="../assets/images/biaotou-kepaixu.png" alt="">
					</div>
					<van-popup v-model="showPop2" position="bottom">
						<van-picker show-toolbar :columns="objList" @cancel="showPop2 = false" @confirm="handleObj" />
					</van-popup>
					<van-form>
						<template v-for="(item,index) in addObj2">
							<div class="flex-between-center" @click="del2(index)">
								<p class="common-title">被起诉方({{index+1}})</p>
								<van-icon name="close" />
							</div>
							<div v-if="item.obj==1">
								<van-field v-model="item.name" label="企业名" placeholder="请输入企业名" />
								<van-field v-model="item.legal" label="法人代表" placeholder="请输入法人代表"/>
								<van-field v-model="item.address" type="textarea" label="企业地址" placeholder="请输入企业地址" />
								<van-field v-model="item.mail_num" label="邮政编码" placeholder="请输入邮政编码"/>
							</div>
							<div v-else-if="item.obj===0">
								<van-field v-model="item.name" label="姓名" placeholder="请输入姓名" />
								<van-field v-model="item.id_card" name="asyncValidator" label="身份证号" placeholder="请输入身份证号" :rules="[{ required: true, message: '请填写身份证号' },{ validator: asyncValidator, message: '请填写正确格式身份证号' }]" />
								
								<van-field name="radio" label="性别">
									<van-radio-group slot="input" v-model="item.sex" direction="horizontal">
										<van-radio name="男">男</van-radio>
										<van-radio name="女">女</van-radio>
									</van-radio-group>
								</van-field>
								<van-field v-model="item.mail_num" label="邮政编码" placeholder="请输入邮政编码" />
							</div>
						</template>
					</van-form>

				</template>
				<!-- <template>
					<p class="common-title">起诉类型</p>
					<div class="litigation-input-warp" @click="showPop2=true">
						<van-field class="litigation-input" readonly placeholder="请选择" v-model="typeName" :border="false" />
						<img src="../../assets/images/biaotou-kepaixu.png" alt="">
					</div>
					<van-popup v-model="showPop2" position="bottom">
						<van-picker show-toolbar :columns="typeList" @cancel="showPop2 = false" @confirm="handleType" />
					</van-popup>
				</template> -->
				<template>
					<p class="common-title">诉讼类型</p>
					<div class="litigation-input-warp" @click="isShow=true">
						<van-field class="litigation-input" readonly placeholder="请选择" v-model="form.case_type_name" :border="false" />
						<img src="../assets/images/biaotou-kepaixu.png" alt="">
					</div>
					<van-popup v-model="isShow" position="bottom">
						<van-picker show-toolbar value-key="type_name" :columns="tagList" @cancel="isShow = false" @confirm="handleTypes" />
					</van-popup>
				</template>
				<!-- <dt-tag-group :rowNumber="3" title="诉讼类型" :isEdit="isEdit" :list="tagList" :selTagList.sync="selList1"></dt-tag-group> -->
				<div class="fill-content m-t10">
					<textarea :placeholder="datums?datums:'简单描述服务需求（选填）'" rows="5" v-model="form.user_remark"></textarea>
					<!-- 上传后展示的样式 -->
					<ul class="upload-list">
						<li v-for="(item,index) in fileList" @click="handleClick(item,index)" :key="index">
							<img v-if="item.file.type.indexOf('image')>-1" width="80" :src="item.content">
							<div v-else>{{item.file.name}}</div>
						</li>
					</ul>
					<div class="d-f">
						<!-- 删除上传文件的弹出框 -->
						<van-action-sheet v-model="delShow" :actions="actions" cancel-text="取消" @select="onselect" :round="false" />
						<van-uploader class="fill-content-upload" :after-read="afterReads" accept=".rar,.doc,.docx,.pdf,image/*,application/zip">
							<div class="upload-btn">
								<span>上传文件</span>
							</div>
						</van-uploader>
					</div>
					<p>支持扩展名：image/*.rar.zip.doc.docx.pdf</p>
				</div>
				<template>
					<p class="common-title">推荐人</p>
					<van-field class="litigation-input" placeholder="请输入推荐人手机号" v-model="form.recommender_phone" :border="false" />
				</template>
				<template>
					<p class="common-title">服务说明</p>
					<div class="common-content" v-html="example"></div>
				</template>
				<div style="display: flex;justify-content: start;align-items: flex-end">
					<van-checkbox class="m-t15 register-van-checkbox" icon-size="16px" v-model="checked">我已阅读并同意</van-checkbox>
					<span @click="showServe=true">《用户服务协议》</span>
				</div>
				<van-popup :round="true" v-model="showServe">
					<div class="wrapper">
						<div class="content">
							<div style="padding-right: 10px;"><van-nav-bar title="用户服务协议">
							  <template #right>
							    <van-icon name="cross" size="18" @click="showServe= false" />
							  </template>
							</van-nav-bar></div>
							<div class="top">
								<div v-html="$newText(agreement)"></div>
							</div>
						</div>
					</div>
				</van-popup>
			</div>
			<van-goods-action>
				<!-- <van-goods-action-icon text="咨询客服" @click="$goTo('/newSend')">
					<img slot="icon" src="../assets/images/kefu.png">
				</van-goods-action-icon> -->
				<van-goods-action-button color="#1A85FF" :disabled="!checked" text="提交案件" @click="onClickButton" v-if="stepIndex===0" />
			</van-goods-action>
		</div>
	</div>
</template>
<script>
	import {
		Toast,
		Dialog
	} from 'vant'
	export default {
		data() {
			return {
				text: '',
				stepIndex: 0,
				stepList: ['提交案件', '客服确认', '支付费用', '提交资料'],
				showPop: false, // 是否显示选择地区弹窗
				areaText: '', //地区值
				shortAreaText: '', // 暂时地区值
				selList: [], // 地区类型
				selList1: [], // 第二个选择类型 
				isSure: false, // 客户是否确认
				isShow: false, // 是否可以编辑
				showBill: false, // 是否要发票
				fillText: '',
				fileList: [],
				actions: [{
					name: '是'
				}, {
					name: '否'
				}],

				content: '',
				show: false,
				delIndex: null, //要删除的index

				tagList: [],
				gation: {},
				checked: false,
				showServe: false,

				form: {
					region: "", //案件所在市
					indicted_id_card: "", //被起诉人身份证号
					indicted_name: "", //被起诉人
					prosecutor_id_card: "", //起诉人身份证号
					prosecutor_name: "", //起诉人
					region_name: "", //案件所在省
					recommender_phone: "", //推荐人联系方式
					user_phone: "", //用户联系方式
					user_remark: "", //
					case_type_name: '',
					case_type_id: '',
					v_code: '',
				},
				showPop1: false,
				obj1: 0,
				objName: '个人',
				showPop2: false,
				obj2: 0,
				typeName: '个人',
				addObj1: [{
					type: 0,
					id_card: '',
					name: '',
					sex: '男',
					mail_num: '',
					obj: 0
				}],
				addObj2: [{
					type: 1,
					id_card: '',
					name: '',
					sex: '男',
					mail_num: '',
					obj: 0
				}],

				show1: false,
				objList: [{
					text: '个人',
					id: 0,
				}, {
					text: '企业',
					id: 1,
				}],
				typeList: [{
					text: '起诉方',
					id: 0,
				}, {
					text: '被起诉方',
					id: 1,
				}],
				file: {},
				case_id: '',
				delIndex: 0,
				delShow: false,
				actions: [{
					name: '文件名字',
					disabled: true
				}, {
					name: '删除',
					color: '#FE0000'
				}],
				example: '',
				datums: '',
				sign: {},
				case_user:[],
				detail:{},
				
				sendYes: false,
				timer: '',
				btnMsg:'获取验证码',
				agreement:'',
			}
		},
		mounted() {
			this.categoryList();
			this.getSetup();
			this.case_id = this.$route.query.case_id;
			this.stepIndex = Number(this.$route.query.index) || 0;
			if (this.case_id) {
				this.getDetails(this.case_id);
				this.caseSign(this.case_id);
			}
		},
		computed: {
			columns() {
				return this.$store.state.region
			},		
			prosecutor_name() {
				if(!this.case_user.length){
					return []
				}
				return this.case_user.reduce((arr, item) => {
					if (item.type == 0) {
						let a = this.$phone(item.id_card) || item.address;
						let string = item.name;
						if(a){
							string = string +'('+ a +')';
						}
						arr.push(string);
					}
					return arr
				}, [])
			},
			indicted_name() {
				return this.case_user.reduce((arr, item) => {
					if (item.type == 1) {
						let a = this.$phone(item.id_card) || item.address;
						let string = item.name;
						if(a){
							string = string +'('+ a +')';
						}
						arr.push(string);
					}
					return arr
				}, [])
			}
		},
		methods: {
			//获取验证码
			async sendCode() {
				if (this.$yzPhone(this.form.user_phone)) {
					return
				}
				if (this.sendYes) {
					Toast('验证码已发送手机，注意查收~~');
					return
				}
				let [e, data] = await this.$store.dispatch('api/phoneCodeApi', {
					phone: this.form.user_phone,
					type: 0
				});
				if (e) return;
				Toast('验证码已发送手机，注意查收~~');
				let send = 60;
				this.sendYes = true;
				this.timer = setInterval(() => {
					this.btnMsg = send + 's';
					if (send == 0) {
						clearInterval(this.timer);
						this.btnMsg = "再次获取";
						this.sendYes = false;
					}
					send--;
				}, 1000)
			},
			// 点击删除
			handleClick(item, index) {
				this.delIndex = index
				this.$set(this.actions[0], 'name', item.file.name)
				this.delshow = true
			},
			//删除
			async onselect() {
				this.fileList.splice(this.delIndex, 1);
				this.delshow = false
			},
			//诉讼页面(获取诉讼基础数据)
			async getLitiGation() {
				let [e, data] = await this.$store.dispatch('lawyer/getLitiGationApi', {
					type: -1,
				});
				if (e) return;
				this.gation = data;
				
				// this.stepList = this.gation.node.reduce((arr, item) => {
				// 	arr.push(item.process_name);
				// 	return arr
				// }, [])
			},
			async getSetup(){
				let [e, data] = await this.$store.dispatch('api/getSetupApi',{
					type:3
				});
				if (e) return;
				this.agreement = data
			},
			//获取该案件合同签署状态
			async caseSign(case_id) {
				let [e, data] = await this.$store.dispatch('lawyer/caseSignApi', {
					case_id,
				});
				if (e) return;
				this.sign = data;
			},
			//下载合同
			async downFlows() {
				//下載合同
				let [e, data] = await this.$store.dispatch('lawyer/downFlowsApi', {
					flow_id: this.sign.flow_id,
				});
				if (e) return;
				let docs = JSON.parse(data).docs;
				docs.forEach((item) => {
					this.$downLoads(item.fileUrl, 1)
				})
			},
			//获取案件类型
			async categoryList() {
				let [e, data] = await this.$store.dispatch('center/caseTypeApi');
				if (e) return;
				this.tagList = data;
			},
			//诉讼页面(获取诉讼基础数据)
			async litiGation() {
				let [e, data] = await this.$store.dispatch('lawyer/basicsApi', {
					agreement: this.checked ? 1 : 0,
					...this.form,
					prosecutor: this.addObj1.concat(this.addObj2)

				});
				if (e) return;
				//循环调用接口上传资料
				if(this.fileList.length){
					let img_license = new FormData();
					this.fileList.forEach(item=>{
						img_license.append("file", item.file);
					})
					img_license.append("case_id", data.case_id);
					let [e1, data1] = await this.$store.dispatch('lawyer/uploadsApi', img_license);
					if (e1) return;
				}
				this.$router.push('/');
				// this.getDetails(data.case_id);
				// this.caseSign(data.case_id);
				Toast('提交成功');
			},
			//诉讼页面(获取诉讼基础数据)
			async getDetails(case_id) {
				let [e, data] = await this.$store.dispatch('lawyer/detailsApi', {
					case_id
				});
				if (e) return;
				console.log(data);
				this.detail = data;
				this.form.region_name = data.region_name;
				this.form.region = data.region;
				this.case_user = data.case_user;
				this.form.recommender_phone = data.recommender_phone;
				this.form.user_phone = data.user_phone;
				this.form.user_remark = data.user_remark;
				if (data.pay) {
					this.stepIndex = 2;
					let [e1, data1] = await this.$store.dispatch('center/toPayApi', {
						case_id
					});
					if (e1) return;
					this.detail.case_order = data1.order_id;
					this.$router.push('/litigationService?case_id=' + data1.case_id);
				} else {
					this.detail.process.forEach(item => {
						if (item.state == 1) {
							this.stepIndex = Number(item.process_num) - 1;
						}
					})
				}
			},
			// 处理点击不限
			handleBx() {
				this.shortAreaText = '不限'
				this.selList = []
			},
			//选择地区
			handleArea(e, i) {
				console.log(e, i);
				this.form.region = e[1] ? this.columns[i[0]].children[i[1]].id : this.columns[i[0]].id;
				console.log(this.form.region);
				this.form.region_name = e[1] || e[0];
				this.showPop = false
			},
			//选择诉讼类型
			handleTypes(e, i) {
				console.log(e[0],e[1],i[0],i[1])
				this.form.case_type_name = e[1]||e[0];
				this.form.case_type_id = e[1]?this.tagList[i[0]].children[i[1]].case_type_id:this.tagList[i[0]].case_type_id;
				this.example = e[1]?this.tagList[i[0]].children[i[1]].service_note:this.tagList[i[0]].service_note;
				if(e[1]){
					let obj = this.tagList[i[0]].children[i[1]].datums;
					if(obj){
						this.datums = obj.reduce((ary,item)=>{
							let string = item.case_datum_name + '（' + item.case_datum_format +'）'
							ary.push(string);
							return ary
						},[]).join(',')
					}
				}else{
					let obj = this.tagList[i[0]].datums;
					if(obj){
						this.datums = obj.reduce((ary,item)=>{
							let string = item.case_datum_name + '（' + item.case_datum_format +'）'
							ary.push(string);
							return ary
						},[]).join(',')
					}
				}
				this.isShow = false
				
			},
			//选择身份
			handleObj(e, i) {
				console.log(e, i, "obj2");
				this.objName = e.text;
				this.obj2 = e.id;
				// this.addObj2 = [];
				this.add2();
				this.showPop2 = false
			},
			del1(index) {
				this.addObj1.splice(index, 1)
			},
			add1() {
				if (this.obj1 == 1) {
					let obj = {
						type: 0,
						address: '',
						name: '',
						legal: '',
						mail_num: '',
						obj: 1
					}
					this.addObj1.push(obj)
				} else if (this.obj1 === 0) {
					let obj = {
						type: 0,
						id_card: '',
						name: '',
						sex: '男',
						mail_num: '',
						obj: 0
					}
					this.addObj1.push(obj)
				}
			},
			add2() {
				if (this.obj2 == 1) {
					let obj = {
						type: 1,
						address: '',
						name: '',
						legal: '',
						mail_num: '',
						obj: 1
					}
					this.addObj2.push(obj)
				} else if (this.obj2 === 0) {
					let obj = {
						type: 1,
						id_card: '',
						name: '',
						sex: '男',
						mail_num: '',
						obj: 0
					}
					this.addObj2.push(obj)
				}
			},
			del2(index) {
				this.addObj2.splice(index, 1)
			},
			//选择身份
			handleType(e, i) {
				console.log(e, i, "obj1");
				this.typeName = e.text;
				this.obj1 = e.id;
				// this.addObj1 = [];
				this.add1();
				this.showPop1 = false
			},
			onSelect(val) {
				this.fillText = val.name
				this.showBill = false
			},
			onSubmit() {
				this.addObj.case_user_id = this.userinfo.user_id;
				this.addObj.obj = this.prosecutor.obj;
				if (this.prosecutor.obj == 1) {
					this.addObj.address = this.prosecutor.address;
					this.addObj.name = this.prosecutor.name;
				} else {
					this.addObj.name = this.prosecutor.name;
					this.addObj.id_card = this.prosecutor.id_card;
					this.addObj.sex = this.prosecutor.sex;
				}
				this.show1 = false;
			},
			onClickButton() {
				if (this.form.region == '') {
					Toast('请选择所在区域');
					return
				}
				if (this.$yzPhone(this.form.user_phone)) {
					return
				}
				if (this.form.v_code == '') {
					Toast('请输入验证码');
					return
				}
				for(let i=0;i<this.addObj1.length;i++){
					
					let index = i+1;
					console.log(index);
					if(this.addObj1[i].obj==1&&!(this.addObj1[i].name&&this.addObj1[i].address&&this.addObj1[i].legal)){
						Toast('起诉方(' + index +'),企业信息不完善！');
						return
					}
					if(this.addObj1[i].obj==0&&!(this.addObj1[i].name&&this.addObj1[i].id_card)){
						Toast('起诉方(' + index +'),个人信息不完善！');
						return
					}
				}
				if (this.form.case_type_id == 0) {
					Toast('请选择诉讼类型');
					return
				}	
				if (!this.checked) {
					Toast('请阅读并同意《用户服务协议》');
					return
				}
				this.litiGation();
			},
			handlePay() {
				this.$router.push({
					path: '/resultPage',
					query: {
						type: 2
					}
				})
			},
			//签署合同
			async write() {
				if (this.sign.status == 1) {
					let [e, data] = await this.$store.dispatch('lawyer/signFlowsApi', {
						accountId: this.userinfo.user_id,
						appScheme: '',
						flowId: this.sign.flow_id,
						organizeId: '',
						urlType: '',
						user_id: this.userinfo.user_id,
					});
					if (e) return;
					let url = JSON.parse(data);
					var newWeb = plus.webview.create(
						url.shortUrl,
						"sd", {
							kernel: 'WKWebview',
							backButtonAutoControl: "close",
							titleNView: {
								// 窗口的标题栏控件
								autoBackButton: true,
								titleText: "签署合同", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
								titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								progress: {
									// 标题栏控件的进度条样式
									color: "#00FF00", // 进度条颜色,默认值为"#00FF00"
									height: "2px" // 进度条高度,默认值为"2px"
								},
								splitLine: {
									// 标题栏控件的底部分割线，类似borderBottom
									color: "#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
									height: "1px" // 分割线高度,默认值为"2px"
								}
							}
						}
					);
					newWeb.addEventListener("loaded", () => {
						newWeb.show();
					});
					newWeb.addEventListener("close", () => {
						this.$router.go(-1);
					});
				}
			},
			//补充资料
			afterRead(event) {
				event.isImage = true;
				this.file = event.file;
			},
			//上传资料
			afterReads(event) {
				console.log(event);
				this.fileList.push(event)
			},
			//提交资料
			async makeSure() {
				let img_license = new FormData();
				img_license.append("file", this.file);
				img_license.append("case_id", this.case_id);
				let [e, data] = await this.$store.dispatch('lawyer/uploadsApi', img_license);
				if (e) return;
				this.file = {};
				this.$toast('提交成功');
				setTimeout(() => {
					this.$router.go(-1);
				}, 600)
			},
			//验证身份证号码
			asyncValidator(val) {
				return new Promise((resolve) => {
					// Toast.loading('验证中...');
					setTimeout(() => {
						// Toast.clear();
						resolve(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val));
					}, 1000);
				});
			},
		},
		watch: {
			selList(val) {
				if (val.length) {
					this.shortAreaText = val[0]
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.litigation-service {
		.litigation-service-content {
			height: calc(100vh - 106px);
			overflow: auto;
			box-sizing: border-box;
		}

		.register-van-checkbox {
			/deep/span {
				color: #9CA4AF;
			}
		}

		.fill-content {
			background: #F2F6F9;
			border-radius: 4px;
			padding: 12px;

			textarea {
				outline: none;
				border: none;
				background: #F2F6F9;
				width: 100%;
			}

			>p {
				color: #AEAEB0;
			}
		}

		.litigation-input {
			padding: 0;

			background: #F2F6F9;

			/deep/.van-field__control {
				height: 32px;
				line-height: 32px;
				padding: 0 16px;
				border-radius: 2px;
				font-size: 12px;
			}
		}

		.litigation-input-warp {
			position: relative;

			img {
				position: absolute;
				width: 18px;
				top: 50%;
				transform: translateY(-50%);
				right: 10px;
			}
		}

		.litigation-area-pop {
			.pop-tool {
				background: #F5F5F8;
				padding: 14px 16px;
				display: flex;
				justify-content: space-between;

				span {
					color: #060A23;

					&:nth-of-type(2) {
						color: #1A85FF;
					}
				}
			}

			.pop-content {
				padding: 0 15px;
				height: 202px;
				overflow-y: auto;

				>p {
					padding: 14px 0;
					text-align: center;
					border-bottom: 1px solid #F5F5F8;

					&.active {
						color: #1A85FF;
					}
				}
			}
		}

		.van-cell-group {
			.van-cell {
				padding: 10px 0;

				/deep/.van-field__label span {
					color: #B8B8C6;
				}
			}
		}

		.clerical-price {
			color: #BCBCBC;
			margin-bottom: 10px;

			.clerical-black {
				color: #060A23;
			}

			.clerical-red {
				color: #F85327;
			}
		}

		.join-vip {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;

			p {
				img {
					width: 14px;
					height: 14px;
					vertical-align: middle;
					margin-right: 10px;
				}

				span {
					vertical-align: middle;
					color: #FB9762;
				}
			}

			.van-button {
				width: 80px;

				span {
					color: #99692D;
				}
			}

		}
	}

	.wrapper{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%; 
		width: 300px;
		.content{
			width: 100%;
			padding-left: 20px;
			padding-bottom: 20px;
			max-height:calc(100vh - 180px);
			background-color: #fff;
			.top{
				padding-top: 20px;
				padding-right: 20px;
				max-height:calc(100vh - 250px);
				overflow-y: scroll;
			}
		}
	}

	.flex-between-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fill-content-upload {
		.upload-btn {
			position: relative;
			width: 71px;
			height: 71px;
			background: url('~@/assets/images/sc.png') 100% 100% no-repeat;
			span {
				color: #C0C1C3;
				position: absolute;
				display: inline-block;
				text-align: center;
				width: 100%;
				bottom: 8px;
				font-size: 12px;
			}
		}
	}
</style>
